<template>
  <div class="module-box">
    <div style="flex: 0 1 50%">
      <dv-border-box-8 style="width: 100%; height: 200px">
        <LineChart :typeChart="'line'" />
      </dv-border-box-8>
    </div>
    <div style="flex: 0 1 25%">
      <dv-border-box-9 style="width: 100%; height: 200px">
        <BarChart />
      </dv-border-box-9>
    </div>
    <div style="flex: 0 1 25%">
      <dv-border-box-10 style="width: 100%; height: 200px">
        <pieChart />
      </dv-border-box-10>
    </div>
  </div>
</template>

<script>
import BarChart from './components/barChart.vue'; //echarts 柱形图
import LineChart from './components/lineChart.vue'; //echarts 折现图
import pieChart from './components/pieChart'; //echarts 饼图
export default {
  components: {
    LineChart,
    BarChart,
    pieChart,
  },
  data() {
    return {
      config1: {
        data: [
          {
            name: '南阳',
            value: 167,
          },
          {
            name: '周口',
            value: 67,
          },
          {
            name: '漯河',
            value: 123,
          },
          {
            name: '郑州',
            value: 55,
          },
          {
            name: '西峡',
            value: 98,
          },
        ],
      },
      config2: {
        data: [
          {
            name: '南阳',
            value: 167,
          },
          {
            name: '周口',
            value: 123,
          },
          {
            name: '漯河',
            value: 98,
          },
          {
            name: '郑州',
            value: 75,
          },
          {
            name: '西峡',
            value: 66,
          },
        ],
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
        unit: '单位',
        showValue: true,
      },
      config3: {
        data: [66, 45],
        shape: 'roundRect',
        colors: ['#f60', 'green'],
        waveOpacity: 0.2,
      },
      config4: {
        centerPoint: [0.48, 0.35],
        points: [
          [0.52, 0.23],
          [0.43, 0.29],
          [0.59, 0.35],
          [0.53, 0.47],
          [0.45, 0.54],
          [0.36, 0.38],
          [0.62, 0.55],
          [0.56, 0.56],
          [0.37, 0.66],
          [0.55, 0.81],
          [0.55, 0.67],
          [0.37, 0.29],
          [0.2, 0.36],
          [0.76, 0.41],
          [0.59, 0.18],
          [0.68, 0.17],
          [0.59, 0.1],
        ],
        bgImgUrl: require('../assets/img/map.jpg'),
        flylineColor: '#fff',
        centerPointImg: {
          url: require('../assets/img/mapCenterPoint.png'),
        },
        pointsImg: {
          url: require('../assets/img/mapPoint.png'),
        },
      },
    };
  },
};
</script>

<style></style>
